<template>
    <div class="portalMain">
        <Header @search="search"/>
        <div class="bodyContent">
            <el-card class="box-card" v-for="item in portalData" :key="item.id">
                <div class="text item">
                    <img @click="goToDetial(item.id)" width="210px" height="218px" style="margin-top: 4px" :src="item.displayImage">
                    <span class="name">{{item.name}}</span>
                    <span class="price"><span>¥</span>{{item.price}}</span>
                </div>
            </el-card>
        </div>
        <div class="footer"></div>
    </div>

</template>

<script lang="ts">
    /* eslint-disable */
    import { Component, Vue } from 'vue-property-decorator';
    import PortalApiActions from "@/components/api/portal-api-actions";
    import Header from '@/components/common/header.vue';
    @Component({
        components:{
            Header
        }
    })
    export default class ProductList extends Vue {
        public searchText="";
        public total=0;
        public currentPage=1;
        public isShowAddDialog=false;
        public portalData=[];
        async created(){
            let result=await PortalApiActions.getSpuListByName({name:""});
            result.data.forEach(item=>{
                item.displayImage=item.skus[0].images.split(";")[0];
                item.price=item.skus[0].price;
                this.portalData.push(item);
            });
        }
        public async search(searchText:any){
            let result=await PortalApiActions.getSpuListByName({name:searchText});
            this.portalData=[];
            result.data.forEach(item=>{
                item.displayImage=item.skus[0].images.split(";")[0];
                item.price=item.skus[0].price;
                this.portalData.push(item);
            });
        }
        //跳转到商品详情页面
        public goToDetial(id:any){
            this.$router.push({
                path: `portalDetial?id=${id}`,
            });
        }
    }
</script>
<style lang="less">
    .portalMain{
         width: 100%;
         height: 100%;
        .bodyContent{
            margin-left: 150px;
            align-items: center;
            margin-right: 150px;
            display: flex;
            flex-wrap: wrap;
            .box-card{
                width: 24%;
                margin-left: 10px;
                margin-top: 10px;
                height: 340px;
                cursor: pointer;
                .item{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
                .name{
                    height: 48px;
                    font-size: 14px;
                    line-height: 24px;
                    text-align: left;
                    color: #666;
                    -webkit-transition: color .2s ease;
                    transition: color .2s ease;
                    word-break: break-all;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    margin-top: 10px;
                }
                .price{
                    font-size:18px;
                    color: #e4393c;
                    margin-top: 5px;
                    align-self: normal;
                }
            }
        }
        .footer{
            height: 100px;
            width: 100%;
        }
    }

</style>
